<template>
  <div class="zong">
    <div class="message">
      <div class="kongzhi">
        <div class="message_1 me" style="margin-left: 0px">
          <div class="message-1-1 left">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="message-1-2 right">
            <div class="tit">累计学习天数</div>
            <span style="margin-bottom: 20px;">111</span>
          </div>
        </div>
      </div>
      <div class="kongzhi">
        <div class="message_2 me">
          <div class="message-2-1 left">
            <i class="el-icon-s-flag"></i>
          </div>
          <div class="message-2-2 right">
            <div class="tit">累计学习量</div>
            <span style="margin-bottom: 20px;">111</span>
          </div>
        </div>
      </div>
      <div class="kongzhi">
        <div class="message_3 me">
          <div class="message-3-1 left">
            <i class="el-icon-s-order"></i>
          </div>
          <div class="message-3-2 right">
            <div class="tit">累计学习课程</div>
            <span style="margin-bottom: 20px;">111</span>
          </div>
        </div>
      </div>
      <div class="kongzhi">
        <div class="message_4 me" style="margin-right: 0px">
          <div class="message-4-1 left">
            <i class="el-icon-s-custom"></i>
          </div>
          <div class="message-4-2 right">
            <div class="tit">累计问答次数</div>
            <span style="margin-bottom: 20px;">111</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tubiao">
      <div id="echart" class="zhexiantu_home" ref="container"></div>
    </div>
    <div class="tubiao_2">
      <div class="kongzhi_tubiao"><div id="echart2" class="tubiao-2-1 tu" style="margin-left: 0px"></div></div>
      <div class="kongzhi_tubiao"><div id="echart3" class="tubiao-2-2 tu"></div></div>
      <div class="kongzhi_tubiao"><div id="echart4" class="tubiao-2-3 tu" style="margin-right: 0px"></div></div>


    </div>
  </div>
</template>

<script>
import * as ec from 'echarts'
import Echarts from "echarts";
export default {
  name: "home",
  mounted(){
    this.$router.push("/home")
    this.drawChart();
  },
  data(){
    return{
      mychart:null,
      mychart_2:null,
      mychart_3:null,
      mychart_4:null,
      option4:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      },
      option3:{
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      },
      option2:{
        legend: {
          data: ['Allocated Budget', 'Actual Spending'],
          bottom:0
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      },
      option:{
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      }
    }
  },
  methods:{
    drawChart() {
      // this.echartsinstance = ec.init(this.$refs.container)
      // this.echartsinstance.setOption(this.option)
      this.myChart = ec.init(document.getElementById("echart"));
      this.mychart_2=ec.init(document.getElementById("echart2"))
      this.mychart_3=ec.init(document.getElementById("echart3"))
      this.mychart_4=ec.init(document.getElementById("echart4"))
      // 第四步，执行myChart的setOption方法去画图，当然至于配置项，我们要提前配置好，这里的配置项
      //         写在data中，方便我们在一些事件中去修改对应配置项，比如点击按钮更改配置项数据
      this.myChart.setOption(this.option);
      this.mychart_2.setOption(this.option2)
      this.mychart_3.setOption(this.option3)
      this.mychart_4.setOption(this.option4)
      // 第五步，在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
      //        如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
      //        我们一般使用这个事件去做窗口大小与对应元素的大小适配
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        this.mychart_2.resize()
        this.mychart_3.resize()
        this.mychart_4.resize()
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    beforeDestroy() {
      /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
      window.removeEventListener("resize", () => {
        this.myChart.resize();
        this.mychart_2.resize()
        this.mychart_3.resize();
        this.mychart_4.resize()
      });
    },
  }
}
</script>

<style scoped>
.kongzhi_tubiao{
  display: inline-block;
  width: 33.333333%;
  /*padding: 20px;*/
  text-align: center;
}
.tu{
  height: 320px;
  margin: 20px;
  background-color: #fff;

}
.tubiao_2{
  /*margin-left: -100px;*/
}
.zhexiantu_home div{
  flex: auto;
  width: 100%;
}
.zhexiantu_home{
  flex: auto;background-color: #fff;height: 350px
}
.message-1-1{


}
.tubiao{
  height: 380px;
  /*padding-top: 20px;*/
  padding: 28px;
  flex: auto;
  /*height: 100px;*/
  background: #fff;
}
.kongzhi {
  display: inline-block;
  margin-bottom: 32px;
  width: 25%;
}

.tit {
  /*margin-top: 20px;*/
  line-height: 18px;
  color: rgba(0, 0, 0, .45);
  font-size: 16px;
  margin-bottom: 12px;
}

.left {
  line-height: 100px;
  font-size: 50px;
  height: 100px;
  float: left;
  margin-left: 30px;
}

.right {
  /*height: 100px;*/
  float: right;
  margin-top: 25px;
  margin-bottom: 25px;
  margin-right: 40px;
  /*line-height: 100px;*/
}

.zong {
  background-color: #f0f2f5;
  padding: 20px;
  flex: auto;
  height: 1000px;
  text-align: center;
  /*background-color: #0077aa;*/
}

.message {
  padding-top: 20px;
  flex: auto;
  /*height: 100px;*/
  /*background-color: chartreuse;*/
}

.me:hover, .me:focus, .me:active{
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.me {
  margin: 20px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  border-radius: 90px/90px;
  background: #fff;
  /*line-height: 200px;*/
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  /*background: #fff;*/
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  height: 100px;
  /*width: 300px;*/
  /*background-color: blue;*/
  /*display: inline-block;*/
  /*line-height: 100px;*/
}
</style>
